﻿<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta name="keywords" content="使用准备" />
		<meta name="description" content="拼图框架使用准备、基本的设置等信息。" />
		<title>起步,使用准备-拼图Pintuer</title>
		<link href="pintuer.css" rel="stylesheet">
		<link href="style.css" rel="stylesheet">
		<script src="jquery.js"></script>
		<script src="pintuer.js"></script>
		<script src="plugins/respond.js"></script>
		<link type="image/x-icon" href="/favicon.ico" rel="shortcut icon" />
		<link href="/favicon.ico" rel="bookmark icon" />
	</head>

<body>
    <div class="layout doc-header fixed">
        <div class="container doc-naver">
            <div class="line">
                <div class="xs3 xm3 xb3 doc-logo">
                    <button class="button icon-navicon margin-top float-right" data-target="#doc-header-pintuer"></button>
                    <a href="index.html">
                        <img src="images/logo.png" width="180" height="40" alt="拼图" class="ring-hover" />
                    </a>
                </div>
                <div class="xl12 xs9 xm9 xb9 doc-nav">
                    <ul class="nav nav-inline nav-navicon padding-small-top nav-menu" id="doc-header-pintuer">
                        <li class="active"><a href="index.html">起步</a> </li>
                        <li><a href="css.html">CSS</a> </li>
                        <li><a href="widgets.html">元件</a> </li>
                        <li><a href="javascript.html">JS组件</a> </li>
						<li><a href="react.html">常用</a></li>
						<li>
							<a href="react.html">其他工具<span class="arrow"></span></a>
							<ul class="drop-menu">
								<li><a href="tools/viewcode.html">代码预览工具</a></li>
								<li><a href="tools/setcolor.html">配色工具</a></li>
								<li><a href="tools/color.html">自定义颜色生成</a></li>
								<li><a href="http://www.box3.cn/">开发工具箱</a></li>
								<li><a href="https://tool.lu/">tool.lu工具箱</a></li>
							</ul>
							</li>
						
                    </ul>
                </div>
            </div>
        </div>
        <div class="bg-main doc-intro">
            <div class="container">
                    <h1 class="fadein-top">
                        使用准备
                    </h1>
                    <p class="fadein-bottom">
                        拼图框架使用准备、基本的设置等信息。
                    </p>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="line">
            <div class="xl12 xs12 xm9 xb9">
                <!--list.start-->
                <div class="doc-right">
                    <h2 class="doc-h2" id="download">
                        下载拼图框架
                    </h2>
                    <p class="doc-lead">
                        在线获取拼图跨屏响应式前端框架，开始快捷、高效的前端开发之旅。
                    </p>
                    <h3 class="doc-h3" id="downfiles">
                        官方下载拼图框架文件
                    </h3>
                    <p class="doc-readme">
                        从官方直接下载拼图前端框架文件，包含CSS，JS等，解压缩后即引入项目使用。
                    </p>
                    <div class="doc-input">
                        <br />
                        <a target="_blank" class="button button-big bg-red icon-download" href="/downloads/pintuer/1.x/">
                            官方下载拼图前端框架
                        </a>
                    </div>
                    <h3 class="doc-h3" id="sites">
                        从专业源码站下载
                    </h3>
                    <p class="doc-readme">
                        各大源码站均有拼图前端框架下载，可从第三方源码站下载拼图前端框架，主要有：
                    </p>
                    <div class="doc-input">
                        <a target="_blank" class="button border-blue" href="http://www.3987.com/xiazai/9/172/44761.html">
                            统一下载站
                        </a>&nbsp;<a target="_blank" class="button border-blue" href="http://www.oschina.net/p/pintuer">
                            开源中国
                        </a>&nbsp;<a target="_blank" class="button border-blue" href="http://download.csdn.net/detail/anysale/7609209">
                            CSDN
                        </a>&nbsp;<a target="_blank" class="button border-blue" href="http://down.chinaz.com/soft/36264.htm">
                            站长站
                        </a>
                    </div>
                    <br />
                    <br />
                    <h2 class="doc-h2" id="files">
                        框架包含的文件
                    </h2>
                    <p class="doc-lead">
                        将下载文件解压缩后，可以看到拼图前端框架的目录及文件，文件按不同目录放置，同时提供了字体图标相关文件。
                    </p>
                    <h3 class="doc-h3" id="include">
                        拼图前端框架包含的文件
                    </h3>
                    <p class="doc-readme">
                        下载压缩包之后，将其解压缩到任意目录即可看到以下目录结构：
                    </p>
                    <div class="doc-code">
<xmp>
    pintuer/
    ├── pintuer.css
    ├── pintuer.js
    ├── demo.url
    └── readme.txt
</xmp>
                    </div>
                    <div class="doc-input">
                        正式版只放置了拼图的css及js文件，另外demo.url、readme.txt为拼图前端框架的示例及说明。
                    </div>
                    <blockquote class="quote border-green doc-quote">
                        <strong>文件调整</strong> 因压缩版与未压缩版文件大小相差很小，正式版不再提供pintuer.min.css及pintuer.min.js文件。
                    </blockquote>
                    <h3 class="doc-h3" id="jquery">
                        依赖于jQuery
                    </h3>
                    <p class="doc-readme">
                        拼图前端框架相关的Javascript插件都在jQuery框架下工作，拼图框架提供了jQuery插件，也可以根据需要更换jQuery的版本。
                    </p>
                    <div class="doc-input">
                        <a target="_blank" class="button border-green icon-download" href="plugins/jquery-1.11.0.zip">
                            本地下载 v1.11.0
                        </a>&nbsp;<a target="_blank" class="button border-green" href="http://jquery.com/">
                            jQuery官网
                        </a>
                    </div>
                    <blockquote class="quote border-yellow doc-quoteyellow">
                        <strong>拼图前端框架依赖于jQuery</strong> 请注意，拼图前端框架的 JavaScript 插件都依赖 jQuery，因此jQuery必须在pintuer.js之前引入，jQuery 1.x版本均支持拼图前端框架。
                    </blockquote>
                    <br />
                    <br />
                    <h2 class="doc-h2" id="browser">
                        浏览器支持
                    </h2>
                    <p class="doc-lead">
                        拼图框架的目标是适合PC及移动设备端最新版的浏览器，同时对历史版本的浏览器同样支持，但对一些老旧浏览器的支持会有偏差，部份效果无法显示，但功能是完整的。
                    </p>
                    <h3 class="doc-h3" id="forbrowsers">
                        支持的浏览器
                    </h3>
                    <p class="doc-readme">
                        我们坚决支持以下浏览器的最新版本：
                    </p>
                    <div class="doc-input">
                        <ul>
                            <li>Chrome (Mac、Windows、iOS和Android)</li>
                            <li>Safari (Mac和iOS版)</li>
                            <li>Firefox (Mac、Windows)</li>
                            <li>Internet Explorer</li>
                            <li>Opera (Mac、Windows)</li>
                        </ul>
                    </div>
                    <blockquote class="quote border-green doc-quote">
                        <strong>浏览器缩放</strong> 当设置浏览器大百分比之时，会引布局错位，所有网站都有此问题，因此可以忽略这情况。
                    </blockquote>
                    <h3 class="doc-h3" id="ie678">
                        IE 6,7,8支持
                    </h3>
                    <p class="doc-readme">
                    </p>
                    <h4 class="doc-title">
                        IE6 ,IE7
                    </h4>
                    <div class="doc-input">
                        因微软于2013年对xp的IE6,7用户强制升级至IE8，win7的IE8强制升级至IE9，虽然大部份效果支持IE6,7，但拼图并不再针对IE6及IE7特别支持。
                    </div>
                    <h4 class="doc-title">
                        Internet Explorer 8
                    </h4>
                    <div class="doc-input">
                        拼图前端框架支持Internet Explorer8版本，然而，因其不支持CSS3及HTML5，所以圆角、阴影、动画等CSS3及HTML5的专有属性是无法被支持。
                    </div>
                    <h4 class="doc-title">
                        IE 8 与 Respond.js
                    </h4>
                    <div class="doc-input">
                        因IE8不支持CSS的媒体查询(media query)，因此，需引入respond.js才能使其实现媒体查询功能。
                        <br />
                        <br />
                        <a target="_blank" class="button border-blue icon-download" href="plugins/respond-1.4.2.zip">
                            本地下载Respond.js
                        </a>&nbsp;<a target="_blank" class="button border-blue icon-github" href="https://github.com/scottjehl/Respond">
                            Github下载
                        </a>
                    </div>
                    <div class="doc-input">
                        <h4 class="doc-title">
                            ie8响应式兼容方案,respond.js的用法及使用时无效的解决办法。
                        </h4>
                        <div class="alert bg-yellow-light">
                            一,css样式表内容.要放在css文件中。
                            <br /> 二,css文件必须是无bom头格式的编码文件。
                            <br /> 三,css文件必须放在head标签内.放在html中的body中无效。
                            <br /> 四,css文件必须放在respond.js之前引用,respond.js可以放在body或网页底部,但为了防止闪屏,建议放在head中。
                            <br />
                        </div>
                    </div>
                    <h3 class="doc-h3" id="browser-modes">
                        浏览器渲染及高速模式
                    </h3>
                    <p class="doc-readme">
                    </p>
                    <h4 class="doc-title">
                        兼容模式处理
                    </h4>
                    <div class="doc-input">
                        拼图并不支持 IE 的兼容模式。为了让 IE 浏览器运行最新的渲染模式下，建议将此 meta 标签加入到你页面的 head 中：
                    </div>
                    <div class="doc-code">
<xmp>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</xmp>
                    </div>
                    <h4 class="doc-title">
                        高速模式
                    </h4>
                    <div class="doc-input">
                        国内浏览器厂商一般都支持兼容模式（即 IE 内核）和高速模式（即 webkit 内核），不幸的是，所有国产浏览器都是默认使用兼容模式，这就造成由于低版本 IE （IE8 及以下）内核让基于 拼图 构建的网站展现效果很糟糕的情况。
                        <br /> 为了让浏览器运行高速模式下，建议将此 meta 标签加入到你页面的 head 中：
                    </div>
                    <div class="doc-code">
<xmp>
<meta name="renderer" content="webkit">
</xmp>
                    </div>
                    <br />
                    <br />
                    <h2 class="doc-h2" id="responsive">
                        移动优先、跨屏响应
                    </h2>
                    <p class="doc-lead">
                        拼图以移动设备为基点，优先适应于移动设备；从移动设备扩大到平板、桌面电脑等设备，实现跨屏响应，兼容桌面的同时，更适应了移动互联网的潮流。
                    </p>
                    <h3 class="doc-h3" id="responsive-mode">
                        跨屏响应式布局
                    </h3>
                    <p class="doc-readme">
                        拼图内置了相关的响应式类，如响应式网格系统、响应式图片、响应式表格等，使用响应式类，可以在各种屏幕大小上自动适合设备。
                    </p>
                    <h4 class="doc-title">
                        模板示例
                    </h4>
                    <div class="doc-code">
<xmp>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>拼图前端框架跨屏响应式模板</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="pintuer.css">
    <script src="jquery.js"></script>
    <script src="pintuer.js"></script>
    <script src="respond.js"></script>
</head>
<body>
    <div class="container">
        <div class="line">
            <div class="xs6 xm4 xb3">xs6 xm4 xb3</div>
            <div class="xs6 xm4 xb3">xs6 xm4 xb3</div>
            <div class="xs6 xm4 xb3">xs6 xm4 xb3</div>
            <div class="xs6 xm4 xb3">xs6 xm4 xb3</div>
        </div>
        <div class="table-responsive">
            <table class="table">...</table>
        </div>
        <img src="..." class="img-responsive" alt="...">
    </div>
</body>
</html>
</xmp>
                </div>
                <h3 class="doc-h3" id="dis-responsive">
                    非响应式布局
                </h3>
                <p class="doc-readme">
                    当然，也可以采用非响应式布局方式，这种情况在所有设备上看到的页面大小是固定的，对特定项目可以使用；正常情况下，默认是响应式的布局方式。
                </p>
                <h4 class="doc-title">
                    禁用方法
                </h4>
                <div class="doc-input">
                    <ul>
                        <li>网格系统采用常规布局的方式。</li>
                        <li>不使用响应式相关的类。</li>
                    </ul>
                </div>
                <h4 class="doc-title">
                    模板示例
                </h4>
                <div class="doc-code">
<xmp>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>拼图前端框架非响应式模板</title>
    <link rel="stylesheet" href="pintuer.css">
    <script src="jquery.js"></script>
    <script src="pintuer.js"></script>
    <script src="respond.js"></script>
</head>
<body>
    <div class="container">
        <div class="line">
            <div class="x3">
                x3
            </div>
            <div class="x9">
                x9
            </div>
        </div>
        <div class="line">
            <div class="x4">
                x4
            </div>
            <div class="x4">
                x4
            </div>
            <div class="x4">
                x4
            </div>
        </div>
        <div class="line">
            <div class="x6">
                x6
            </div>
            <div class="x6">
                x6
            </div>
        </div>
    </div>
</body>
</html>
</xmp>
            </div>
            <br />
            <br />
            <h2 class="doc-h2" id="page">
                基本页面
            </h2>
            <p class="doc-lead">
                使用以下简洁的HTML模版，或在模块的基础上根据自有需要修改。
            </p>
            <h3 class="doc-h3" id="html">
                HTML模版
            </h3>
            <p class="doc-readme">
                使用简单的HTML模版页面，包含CSS及JS文件，建议根据自己的需求做相关的修改再使用，如关键字、书签、代码等。
            </p>
            <div class="doc-code">
<xmp>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>拼图前端框架HTML模版</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="pintuer.css">
    <script src="jquery.js"></script>
    <script src="pintuer.js"></script>
    <script src="respond.js"></script>
</head>
<body>
    <h1>
        您好，欢迎使用拼图前端框架!
    </h1>
</body>
</html>
</xmp>
        </div>
        <blockquote class="quote border-red doc-quotered">
            <strong>引用顺序</strong> jQuery.js在pintuer.js之前引用，如有自定义的CSS或JS，请在pintuer.css及pintuer.js之后引用，同时为了IE8下正常使用响应式，自定义的CSS文件应在respond.js之前引用。
        </blockquote>
        <h3 class="doc-h3" id="page-color">
            自定义颜色
        </h3>
        <p class="doc-readme">
            拼图框架包含可三类颜色体系，第一类为可自定义的前端配色体系，包含主色、辅色、背景色、融合色和点缀色；第2类为无色系，包含黑、灰、白三色；第三类为彩色系,包含红、黄、蓝、绿四色，同时也由此衍生的淡红、淡黄、淡蓝、淡绿的背景色。
        </p>
        <h4 class="doc-title">
            可定义的色系
        </h4>
        <div class="doc-input">
            三类色系中，拼图提供固定的第二、第三类色系的同时，也提供了可自定义的第一类色系，可根据项目要求，自主修改配色体系，使得前端色彩配置灵活而丰富。 具体修改方法为，打开pintuer.css，将文档拉到页尾，即可看到可供修改的颜色；
        </div>
        <div class="doc-code">
<xmp>
/*--------自定义链接颜色(可选)--------*/
a{color:#333;text-decoration:none;}
/*链接-颜色*/
a:focus,a:hover{color:#0a8;}
/*链接-悬浮颜色*/
/*--------自定义文本颜色--------*/
* {color:#08a;}
/*文本-主色*/
* {color:#0ae;}
/*文本-辅色*/
* {color:#efe;}
/*文本-背景色*/
* {color:#aed;}
/*文本-融合色*/
* {color:#e33;}
/*文本-点缀色*/
/*--------自定义背景色--------*/
* {background-color:#0a8;}
/*背景-主色*/
* {background-color:#0ae;}
/*背景-辅色*/
* {background-color:#efe;}
/*背景-背景色*/
* {background-color:#aed;}
/*背景-融合色*/
* {background-color:#e33;}
/*背景-点缀色*/
/*--------自定义边框色--------*/
* {border-color:#0a8;}
/*边框-主色*/
* {border-color:#0ae;}
/*边框-辅色*/
* {border-color:#efe;}
/*边框-背景色*/
* {border-color:#aed;}
/*边框-融合色*/
* {border-color:#e33;}
/*边框-点缀色*/
/*--------自定义按钮悬浮文本、边框及背景色--------*/
* {color:#fff;border-color:#0ab;background-color:#0ab;}
/*主色-文本-边框-背景*/
* {color:#fff;border-color:#09f;background-color:#09f;}
/*配色-文本-边框-背景*/
* {color:#333;border-color:#cec;background-color:#cec;}
/*背景色-文本-边框-背景*/
* {color:#333;border-color:#cec;background-color:#cec;}
/*融合-文本色-边框-背景*/
* {color:#fff;border-color:#f00;background-color:#f00;}
/*点缀色-文本-边框-背景*/
</xmp>
        </div>
        <blockquote class="quote border-green doc-quote">
            <strong>颜色修改</strong> 链接可根据系统可选择性的修改；其他的文本色、背景色、边框色改成自身项目对应的主色、辅色、背景色、融合色及点缀色，按钮悬浮色一般会用较深点或较淡点颜色，具体自主定义。
        </blockquote>
        <div class="doc-input">
            <a class="button border-dot icon-download" href="plugins/pintuer-uikit.zip" target="_blank">
                下载修改配色PSD
            </a>
        </div>
        <h3 class="doc-h3" id="page-corner">
            改为直角
        </h3>
        <p class="doc-readme">
            框架默认的样式，大部份采用圆角样式，因IE8以下浏览器不支持CSS3，显示的是直角；当在支持CSS3的浏览器上，如果想要改为直角形式，只需在pintuer.css最后或自定义的CSS文件加上以下代码，即实现了样式的直角化。
        </p>
        <div class="doc-code">
<xmp>
    blockquote,.drop-menu,.nav ul,.nav.nav-main li:first-child,.nav.nav-main li:first-child a,.nav.nav-main li:last-child a,.nav.nav-sub a,.nav.nav-tabs a,.bg-inverse .nav.nav-tabs a,.bg-inverse
.nav.nav-tabs .active a,.selected-inline li,.progress,.progress
    .progress-bar:last-child,.range,.range-bar,.panel,.panel-head,.panel-foot,.tab .tab-nav li a,.tab .tab-body-bordered,.dialog,.dialog .dialog-head,.tip,.tip .tip-body,.tip .image,.alert,.pagination li,.pagination .active,.pagination a:hover,.pagination-group,.pagination-group
    li:first-child,.pagination-group li:last-child,.pager li a{border-radius:0;}
</xmp>
        </div>
        <blockquote class="quote border-yellow doc-quoteyellow">
            <strong>圆角元素</strong> 在使用习惯中，徽章、标签、胶囊、圆点等元素为圆角的，直角解决方案中为不包含此类元素，此类元素个别需要改为正角的，在元素上添加.radius-none可消除圆角效果。
        </blockquote>
        <div class="doc-input">
            按钮和表单，有时也会用到直角的需要，则以同样方式加上以下代码：
        </div>
        <div class="doc-code">
<xmp>
    .button,.button-group .button-group:first-child .dropdown-toggle,.button-group .button-group:last-child .button:first-child,.button-group-y .button-group:first-child .dropdown-toggle,.button-group-y .button-group:last-child .button:first-child,.input,.input-group
    .addon,.input-inline input:first-child,.input-inline input:last-child,.input-block input:first-child,.input-block input:last-child{border-radius:0;}
</xmp>
        </div>
        <br />
        <br />
        <h2 class="doc-h2" id="support">
            第三方应用支持
        </h2>
        <p class="doc-lead">
        </p>
        <h3 class="doc-h3" id="support">
            对第三方应用或组件的支持
        </h3>
        <p class="doc-readme">
            拼图CSS架构官方声明不支持任何第三方应用或组件，但我们提供一些使用建议，避免影响项目的显示。
        </p>
        <h4 class="doc-title">
            Box-sizing
        </h4>
        <div class="doc-input">
            某些第三方应用，可能会由于* { box-sizing: border-box; }的设置而产生冲突，这一设置使padding不影响页面元素最终宽度的计算；对于这类冲突，我们建议给元素重新定义样式 .*{box-sizing:content-box;}来解决。
        </div>
        <br />
        <br />
        <h2 class="doc-h2" id="business">
            业务合作
        </h2>
        <p class="doc-lead">
        </p>
        <h3 class="doc-h3" id="view">
            合作内容
        </h3>
        <p class="doc-readme">
            本站针对前端工程师而服务，同时也适用于广大网页设计师、制作及程序人员使用，定位精准，访问频率高，欢迎与符合人群定位的企业或个人的业务或广告合作，实现共赢互利。
        </p>
        <div class="doc-input">
            <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=106967808&site=qq&menu=yes">
                <img border="0" src="http://wpa.qq.com/pa?p=2:106967808:51" alt="业务合作" title="业务合作" />
            </a>
        </div>
        <br />
        <br />
        <h2 class="doc-h2" id="license">
            使用许可
        </h2>
        <p class="doc-lead">
        </p>
        <h3 class="doc-h3" id="license">
            使用要求
        </h3>
        <p class="doc-readme">
            拼图前端框架由专业团队开发，版权归 © 拼图Pintuer.com所有，在使用拼图前端框架过程中，允许及禁止的事项有：
        </p>
        <blockquote class="quote border-green doc-quote">
            <strong>允许你</strong>
            <ul>
                <li>自由下载或提供下载拼图前端框架，可用于个人及商业目的站点。</li>
                <li>将原始拼图前端框架放入项目中发布或使用。</li>
            </ul>
        </blockquote>
        <blockquote class="quote border-red doc-quotered">
            <strong>禁止你</strong>
            <ul>
                <li>对拼图前端框架任何形式的修改并发布或出版。</li>
                <li>任何形式的声明拥有拼图前端框架的版权。</li>
            </ul>
        </blockquote>
        <br />
        <br />
    </div>
    <!--list.end-->
</div>
<div class="hidden-l hidden-s xm3 xb3">
    <div class="sidebar doc-sidebar fadein-left">
        <ul class="sidenav nav spy fixed" data-offset-fixed="270" data-offset-spy="160">
            <li>
                <a href="#download">下载拼图框架</a>
                <ul>
                    <li><a href="#downfiles">官方下载拼图框架文件</a> </li>
                    <li><a href="#sites">从专业源码站下载</a> </li>
                </ul>
            </li>
            <li>
                <a href="#files">框架包含的文件</a>
                <ul>
                    <li><a href="#include">拼图前端框架包含的文件</a> </li>
                    <li><a href="#jquery">依赖于jQuery</a> </li>
                </ul>
            </li>
            <li>
                <a href="#browser">浏览器支持</a>
                <ul>
                    <li><a href="#forbrowsers">支持的浏览器</a> </li>
                    <li><a href="#ie678">IE 6,7,8支持</a> </li>
                    <li><a href="#browser-modes">浏览器渲染及高速模式</a> </li>
                </ul>
            </li>
            <li>
                <a href="#responsive">移动优先、跨屏响应</a>
                <ul>
                    <li><a href="#responsive-mode">跨屏响应式布局</a> </li>
                    <li><a href="#dis-responsive">非响应式布局</a> </li>
                </ul>
            </li>
            <li>
                <a href="#page">基本页面</a>
                <ul>
                    <li><a href="#html">HTML模版</a> </li>
                    <li><a href="#page-color">自定义颜色</a> </li>
                    <li><a href="#page-corner">改为直角</a> </li>
                </ul>
            </li>
            <li>
                <a href="#support">第三方应用支持</a>
                <ul>
                    <li><a href="#support">对第三方应用或组件的支持</a> </li>
                </ul>
            </li>
            <li>
                <a href="#business">业务合作</a>
                <ul>
                    <li><a href="#view">合作内容</a> </li>
                </ul>
            </li>
            <li>
                <a href="#license">使用许可</a>
                <ul>
                    <li><a href="#license">使用要求</a> </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
</div>
</div>
<div class="container doc-footer">
    版权所有 &copy; <a href="">Pintuer.com</a> All Rights Reserved.
</div>
<div class="doc-backtop win-backtop icon-arrow-circle-up">
</div>
<script src="plugins/layer/layer.js"></script>
<script src="plugins/zclip/jquery.zclip.min.js"></script>
<script src="plugins/site.js"></script>
</body>

</html>
